<template>
  <el-button @click="addMeetingDialogShow=true">发布会议/比赛</el-button>
  <el-table
      :data="meetingData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="mname"
        label="名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="location"
        label="地址"
        width="180">
    </el-table-column>
    <el-table-column
        prop="time"
        label="时间"
        width="180">
    </el-table-column>
    <el-table-column
        prop="type"
        label="类型"
        width="180">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
    </el-table-column>
    <el-table-column
        prop="createBy"
        label="创建人"
        width="180">
    </el-table-column>
    <el-table-column
        prop="操作"
        label="操作">
      <template v-slot="scope">
        <el-popconfirm title="Are you sure to delete this?"
                       confirm-button-text="OK"
                       cancel-button-text="No, Thanks"
                       :icon="InfoFilled"
                       icon-color="red">
          <template #reference>
            <el-button @click="deleteMeetingFun(scope.row.id)">Delete</el-button>
          </template>
        </el-popconfirm>
        <el-button @click="showQrcode(scope.row.id)">二维码</el-button>
        <el-button @click="openInfoDialog()">查看</el-button>
        <el-button @click="sendMeetingEmailFun(scope.row.id)">发送通知</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage=searchMeetingData.pageNum
      v-model:page-size=searchMeetingData.pageSize
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=tableSize
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <el-dialog
      v-model="addMeetingDialogShow"
      title="添加会议/通知"
      width="30%"
      destroy-on-close
      center>
    <el-form
        :label-position="addMeetingLabelPosition"
        label-width="100px"
        :model="addMeetingData"
        style="max-width: 460px"
    >
      <el-form-item label="会议/比赛名称">
        <el-input v-model="addMeetingData.name"/>
      </el-form-item>
      <el-form-item label="地点">
        <el-input v-model="addMeetingData.location"/>
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="addMeetingData.time"/>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="addMeetingData.type" class="m-2" placeholder="Select"
                   clearable="clearable">
          <el-option
              v-for="item in meetingType"
              :key="item.key"
              :label="item.value"
              :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年级" :required="meetingRequired">
        <el-checkbox-group v-model="addMeetingData.grade">
          <el-checkbox
              v-for="item in gradeList"
              :label="item"
              :key="item"
              :value="item"
          />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="部门">
        <el-checkbox-group v-model="addMeetingData.list">
          <el-checkbox
              v-for="item in departmentInfo.arr"
              :label="item.departmentName"
              :key="item.id"
              :value="item.id"
          />
        </el-checkbox-group>
      </el-form-item>
      <el-button @click="addMeetingFun()">确定</el-button>
    </el-form>
  </el-dialog>

  <el-dialog
      v-model="searchInfoDialogShow"
      title="参加人员数据"
      width="90%"
      destroy-on-close
      center>
    <div style="width: 100%;margin-left: 10px">
      姓名:
      <el-input v-model="searchInfoData.name"
                clearable="clearable"
                style="width: 100px"/>
      地址:
      <el-input v-model="searchInfoData.location"
                clearable="clearable"
                style="width: 100px;"/>
      是否存在地址:
      <el-select v-model="searchInfoData.existLocation" class="m-2" placeholder="Select"
                 clearable="clearable">
        <el-option
            v-for="item in existLocationSelectData"
            :key="item.key"
            :label="item.value"
            :value="item.key"
        />
      </el-select>
      <el-button @click="searchInfoFun()">搜索</el-button>
      <el-button @click="setInfoDialogShow = true">设置位置</el-button>
    </div>
    <el-table
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
        :data="searchInfoDialogData"
        border
        style="width: 100%">
      <el-table-column align="center"  :reserve-selection="true" type="selection" width="50"></el-table-column>
      <el-table-column
          prop="id"
          label="ID"
          width="180" >
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="qqInfo"
          label="QQ"
          width="180">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话"
          width="180">
      </el-table-column>
      <el-table-column
          prop="college"
          label="学院"
          width="180">
      </el-table-column>
      <el-table-column
          prop="grade"
          label="年级"
          width="180">
      </el-table-column>
      <el-table-column
          prop="location"
          label="位置"
          width="180">
      </el-table-column>
      <el-table-column
          prop="isEnable"
          label="是否可用">
        <template v-slot="scope">
          <el-switch
              v-model="scope.row.isEnable"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
          >
            <!--              @change="userInfoChange(scope.row.id)"-->
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage=searchInfoData.pageNum
        v-model:page-size=searchInfoData.pageSize
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=searchInfoTableSize
        @size-change="dialogHandleSizeChange"
        @current-change="dialogHandleCurrentChange"
    />
  </el-dialog>

  <el-dialog
      v-model="setInfoDialogShow"
      title="设置参赛/参会地址"
      width="30%"
      destroy-on-close
      center>
    地址:
    <el-input v-model="operation.location"/>
    <el-button @click="setInfoDialogShow = false">Cancel</el-button>
    <el-button type="primary" @click="setLocationFun()">Confirm</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive} from "@vue/reactivity";
import {onMounted, ref} from "vue";
import {
  addMeetingApi,
  deleteMeetingApi,
  searchBasicMeetingApi,
  searchDepartment,
  searchMeetingApi, sendMeetingEmailApi, setLocationApi,
} from "../../api/api";
import {ElMessage} from "element-plus";
import {InfoFilled} from '@element-plus/icons-vue'
import {url} from '../../token/token'

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let tableSize = ref(0)
let searchMeetingData = reactive({
  pageSize: 10,
  pageNum: 1,
  user: ''
})
let meetingData = ref([{
  id: '',
  mname: '',
  location: '',
  time: '',
  type: '',
  createTime: '',
  createBy: ''
}])

function searchMeetingFun() {
  searchMeetingApi(searchMeetingData)
      .then(res => {
        // @ts-ignore
        if (200 !== res.code) {
          ElMessage.error('获取数据失败!')
        } else {
          meetingData.value = res.data.list;
          tableSize.value = res.data.count;
        }
      })
}
const handleSizeChange = (val: number) => {
  searchMeetingFun();
}
const handleCurrentChange = (val: number) => {
  searchMeetingFun();
}
const meetingRequired = ref(false)
const addMeetingLabelPosition = ref('right')
let addMeetingDialogShow = ref(false)
let addMeetingData = ref({
  name: '',
  location: '',
  time: '',
  type: '',
  grade: [],
  list: []
})
let meetingType = [{
  key: 'MATCH',
  value: '比赛'
}, {
    key: 'MEETING',
    value: '会议'
  }]
let gradeList = [2019, 2020, 2021, 2022, 2023, 2024]
let departmentInfo = reactive({
  arr: [{
    departmentName: '',
    id: 0
  }]
})
function addMeetingFun() {
  addMeetingApi(addMeetingData.value)
      .then(res => {
        // @ts-ignore
        if (res.code !== 200) {
          ElMessage.error(res.data)
        } else {
          ElMessage.info('添加成功!');
          addMeetingDialogShow.value = false;
          searchMeetingFun();
        }
      })
}

function deleteMeetingFun(id: string) {
  deleteMeetingApi(id)
      .then(res => {
        // @ts-ignore
        if (200 !== res.code) {
          ElMessage.error(res.data)
        } else {
          ElMessage.success('删除成功!');
          searchMeetingFun();
        }
      })
}

function searchDepartmentFun() {
  searchDepartment({
    pageSize: -1,
    pageNum: 1
  })
      .then(res => {
        // @ts-ignore
        if (200 !== res.code) {
          alert('获取信息错误!')
        } else {
          departmentInfo.arr = res.data.list;
        }
      })
      .catch(error => {
        console.log(error);
      })
}

function showQrcode(id: string) {
  window.open(url + 'common/meeting/' + id)
}

let searchInfoDialogShow = ref(false)
let searchInfoDialogData = ref([{
  id: '',
  nickName: '',
  address: '',
  qqInfo: '',
  email: '',
  phone: '',
  college: '',
  grade: '',
  isEnable: 0,
  location: ''
}])
let searchInfoData = reactive({
  pageSize: 10,
  pageNum: 1,
  name: '',
  existLocation: 0,
  location: ''
})
let searchInfoTableSize = ref(0)
let existLocationSelectData = [
  {
    key: 0,
    value: '全部'
  },
  {
    key: -1,
    value: '无地址'
  },
  {
    key: 1,
    value: '有地址'
  },
]

function searchInfoFun() {
  searchBasicMeetingApi(searchInfoData)
      .then(res => {
        // @ts-ignore
        if (res.code !== 200) {
          // @ts-ignore
          ElMessage.error(res.message)
        } else {
          searchInfoDialogData.value = res.data.list;
          searchInfoTableSize.value = res.data.count;
        }
      }).catch(error => {
    console.log(error)
  })
}

function openInfoDialog() {
  searchInfoDialogShow.value = true;
  searchInfoFun();
}

function dialogHandleSizeChange() {
  searchInfoFun();
}

function dialogHandleCurrentChange() {
  searchInfoFun();
}

let setInfoDialogShow = ref(false)
let operation = reactive({
  id:[],
  location:''
})
function handleSelectionChange(selection : any, row: any){
  // @ts-ignore
  operation.id = ref([])
  for (let info in selection){
    // @ts-ignore
    operation.id.push(info)
  }
  console.log(operation.id)
}

// @ts-ignore
function getRowKey(row){
  return row.id;
}
// @ts-ignore
function setLocationFun(){
  setLocationApi(operation)
  .then(res=>{
    // @ts-ignore
    if (res.code !== 200){
      ElMessage.error('设置错误!')
      console.log(res.data)
    }else {
      ElMessage.success('设置成功')
      setInfoDialogShow.value = false;
      searchInfoFun();
    }
  })
}

function sendMeetingEmailFun(id : string){
  sendMeetingEmailApi(id)
  .then(res=>{
    // @ts-ignore
    if (res.code !== 200){
      ElMessage.error('发送失败!');
      console.log(res.data);
    }else{
      ElMessage.success('发送成功!')
    }
  })
}

onMounted(() => {
  searchDepartmentFun();
  searchMeetingFun();
})
</script>

<style scoped>

</style>
